<template>
  <div class="sidebar">
    <div @click="changeBar(item)" class="barItem" :class="{ active: item.text == activeBar }" v-for="item in tabList" :key="item.text">
      <i :class="item.icon"></i>{{ item.text }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabList: [
        {
          text: "文档问答",
          page: "questionsAnswers",
          icon: "iconfont icon-jiexi2",
        },
        {
          text: "公共知识库",
          page: "publicKonwledge",
          icon: "iconfont icon-xieyi",
        },
        {
          text: "我的知识库",
          page: "myKnowledge",
          icon: "iconfont icon-wenjian1",
        },
        {
          text: "公共工具集",
          page: "tool",
          icon: "elIcon el-icon-files",
        },
      ],
      activeBar: "文档问答",
    };
  },
  methods: {
    changeBar(item) {
      this.activeBar = item.text;
      this.$emit("chanegPage", item.page);
    },
  },
};
</script>
<style lang="scss" scoped>
.sidebar {
  height: 100%;
  width: 298px;
  background: #303d63;
  border-top: 1px solid #fff;
  padding: 10px 16px;
  box-sizing: border-box;
  .barItem {
    font-size: 16px;
    color: #cfcfcf;
    text-align: left;
    line-height: 48px;
    padding: 0px 10px;
    border-radius: 5px;
    cursor: pointer;
    .elIcon {
      margin-right: 5px;
    }
    &.active {
      color: #fff;
      background: linear-gradient(205deg, #6491d9 0%, #3458b2 100%);
    }
  }
}
</style>
